<template>
  <div>
    <a-modal
      v-model="visible"
      :title="`仓库入库单${pto.applyCode}`"
      width="80%"
    >
      <template slot="footer" style="text-align: center">
        <a-button @click="visible = false">取消</a-button>
        <a-button type="primary" @click="getPdf()">下载为PDF</a-button>
      </template>
      <div id="pdfDom">
        <h1 style="width: 100%; text-align: center">
          {{ `仓库入库单${pto.applyCode}` }}
        </h1>
        <h2 style="margin-left:50px">客户编号：{{ pto.tenantId }}</h2>
        <h2 style="margin-left:50px">预报总箱数：{{ pto.forecastBoxNumber }}</h2>
        <h2 style="margin-left:50px"> 备注：{{ pto.remark===''?'暂无':pto.remark }}</h2>

        <div class="tab">
          <!-- 表格 -->
          <a-table
            size="small"
            bordered
            :data-source="pto.boxlist"
            :pagination="false"
          >
            <!-- 箱子编号 -->
            <a-table-column
              key="boxNo"
              data-index="boxNo"
              align="center"
              width="8%"
            >
              <span slot="title"> 箱子编号</span>
              <template slot-scope="text, record">
                {{ record.boxNo }}
              </template>
            </a-table-column>
            <!-- 箱数 -->
            <a-table-column
              key="customNo"
              data-index="customNo"
              align="center"
              width="8%"
            >
              <span slot="title">箱数</span>
              <template slot-scope="text, record">
                <span>{{
                  record.packingNumber === "" || record.packingNumber === null
                    ? "暂无"
                    : record.packingNumber
                }}</span>
              </template>
            </a-table-column>
            <!-- 核算SKU数量 -->
            <a-table-column
              key="packingNumber"
              data-index="packingNumber"
              align="center"
              width="13%"
            >
              <span slot="title"> 核算SKU箱数</span>
              <template slot-scope="text, record">
                <span>
                  {{ record.newPackingNumber }}
                </span>
              </template>
            </a-table-column>
            <!-- sku信息 -->
            <a-table-column
              key="boxlist"
              class="columns-tab"
              data-index="boxlist"
              align="center"
              width="71%"
            >
              <div slot="title" class="columns">
                <div>商品名称</div>
                <div>商品SKU</div>
                <div>标签</div>
                <div>重量</div>
                <div>规格</div>
                <div>SKU数量/箱</div>
                <div>SKU总数</div>
              </div>
              <!-- 表格 -->
              <template slot-scope="text, record">
                <ul class="pto-list" v-for="item in record.pto" :key="item.key">
                  <li>
                    {{ item.skuName }}
                    <span v-if="item.skuName === ''"></span>
                  </li>
                  <li>
                    <span>
                      {{ item.sku }}
                    </span>
                  </li>
                  <li>
                    <span>
                      {{ item.productTag }}
                    </span>
                  </li>
                  <li>{{item.caratNumber}}</li>
                  <li>{{item.lengthNumber}}*{{item.wideNumber}}*{{item.highNumber}}</li>
                  <li>{{item.singleBoxNumber}}</li>
                  <li>{{item.newProductNumber}}</li>
                </ul>
              </template>
            </a-table-column>

          </a-table>


        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      pto: {},
      htmlTitle: "pdf",
    };
  },
  mounted() {
    this.$bus.$off("InStoragesPDF");
    this.$bus.$on("InStoragesPDF", (data) => {
      this.pto = data;
      console.log(data);
      this.visible = true;
    });
  },
  methods: {

  },
};
</script>

<style lang="less" scoped>
/deep/.ant-table-header-column{
  width:100% !important;
}
.columns {
  display: flex;
  div{
    flex: 1;
  }
}
.pto-list {
  display: flex;
  padding: 0;
  li {
    flex: 1;
    list-style: none;
    border: 1px solid #ccc;
  }
}
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
.tab {
  border: 1px solid #e8e8e8;
  div {
    text-align: center;
    border: 1px solid #e8e8e8;
    line-height: 40px;
  }
}
</style>